<template>
    <div class="table">
        <el-breadcrumb separator="/" class="breadCrumb">
            <el-breadcrumb-item>{{$t('sidebar.taskCronerMsg')}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{$t('sidebar.taskCronerAlertConfig')}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="crumbs">
            <el-row :gutter="15">
                <el-col :span="2" style="min-width:100px;">
                    <el-input
                        :placeholder="$t('taskCronerAlertConfig.pleaseInput',{ name: 'ID' })"
                        v-model="searchForm.id">
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-input
                        :placeholder="$t('taskCronerAlertConfig.pleaseInput',{ name: $t('taskCronerAlertConfig.taskClass') })"
                        v-model="searchForm.taskClass">
                    </el-input>
                </el-col>
                <el-col :span="4" style="line-height: 35px;">
                    <el-button size="small" type="primary" @click="searchData()">{{$t('taskCronerAlertConfig.search')}}</el-button>
                    <el-button size="small" type="primary" @click="refreshData()">{{$t('taskCronerAlertConfig.refresh')}}</el-button>
                </el-col>
                <el-col :span="1" class="floatRight">
                    <el-button size="small" type="primary" @click="addButton()">{{$t('taskCronerAlertConfig.add')}}</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="tableData" border  style="width: 100%" :max-height="$store.state.allTable.tableHeight" v-loading="tableDataLoading"
                  :element-loading-text="$t('allTable.dataLoading')">
            <el-table-column prop="id" label="ID" fixed width="80">
            </el-table-column>
            <el-table-column prop="taskClass" :label="$t('taskCronerAlertConfig.taskClass')" min-width="150">
            </el-table-column>
            <el-table-column prop="failAllRate" :label="$t('taskCronerAlertConfig.failAllRate')" width="40">
            </el-table-column>
            <el-table-column :label="$t('taskCronerAlertConfig.failAllRateLink')" min-width="100">
                <template scope="scope">
                    <el-button size="mini" v-for="(value,index) in scope.row.failAllRateLink" @click="showContact(index)">{{ value }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="failPartnerRate" :label="$t('taskCronerAlertConfig.failPartnerRate')" width="45">
            </el-table-column>
            <el-table-column :label="$t('taskCronerAlertConfig.failPartnerRateLink')" min-width="100">
                <template scope="scope">
                    <el-button size="mini" v-for="(value,index) in scope.row.failPartnerRateLink" @click="showContact(index)">{{ value }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="failProgramRate" :label="$t('taskCronerAlertConfig.failProgramRate')" width="45">
            </el-table-column>
            <el-table-column :label="$t('taskCronerAlertConfig.failProgramRateLink')" min-width="100">
                <template scope="scope">
                    <el-button size="mini" v-for="(value,index) in scope.row.failProgramRateLink" @click="showContact(index)">{{ value }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="timeRun" :label="$t('taskCronerAlertConfig.timeRun')" width="80">
            </el-table-column>
            <el-table-column prop="createDate" :label="$t('taskCronerAlertConfig.createDate')" width="150">
            </el-table-column>
            <el-table-column prop="modifyDate" :label="$t('taskCronerAlertConfig.modifyDate')" width="150">
            </el-table-column>
            <el-table-column prop="status" :label="$t('taskCronerAlertConfig.status')" width="60" :formatter="statusShow">
            </el-table-column>
            <el-table-column :label="$t('taskCronerAlertConfig.operation')" width="100" fixed="right">
                <template scope="scope">
                    <el-button size="mini"
                               @click="handleEdit(scope)">{{$t('taskCronerAlertConfig.modify')}}</el-button>
                    <el-button size="mini" type="danger"
                               @click="deleteData(scope.row.id)">{{$t('taskCronerAlertConfig.delete')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="mgtb20" :class="{ pagination : tableData.length !== 0}">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change ="handleCurrentChange"
                :page-sizes="$store.state.allTable.pageSizesChoice"
                :page-size="pageSizeGetter"
                layout="total, sizes, prev, pager, next, jumper"
                :total="sizeAll"
                :page-count="pageCount"
                v-if="tableData.length !== 0">
            </el-pagination>
        </div>
        <el-dialog :title="$t('sidebar.taskCronerAlertConfig')" size="small" v-model="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" :inline="true" label-position="right">
                <el-row type="flex">
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.taskClass')" prop="taskClass">
                            <el-input v-model="ruleForm.taskClass" :placeholder="$t('taskCronerAlertConfig.taskClass')" :readonly="hasTaskClass"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.timeRun')" prop="timeRun">
                            <el-input v-model="ruleForm.timeRun" :placeholder="$t('taskCronerAlertConfig.timeRun')"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.failAllRate')" prop="failAllRate">
                            <el-input v-model="ruleForm.failAllRate" :placeholder="$t('taskCronerAlertConfig.failAllRate')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-popover
                            ref="popover1"
                            v-model="popoverFailAll"
                            placement="bottom"
                            :title="$t('taskCronerAlertConfig.failAllRateLink')"
                            trigger="click">
                            <i class="el-icon-close popoverClose" @click="popoverFailAll = false"></i>
                            <el-transfer
                                filterable
                                v-model="choiceFailAllRateLink"
                                :data="failLinkData"
                                :titles="['未选', '已选']"></el-transfer>
                        </el-popover>
                        <el-form-item :label="$t('taskCronerAlertConfig.failAllRateLink')">
                            <!--<el-input v-model="ruleForm.failAllRateLink" :placeholder="$t('taskCronerAlertConfig.failAllRateLink')"></el-input>-->
                            <el-tag v-for="value in choiceFailAllRateLink" class="linkTag" type="primary">{{value}}</el-tag>
                            <el-button size="mini" v-popover:popover1 @click="contactList.length === 0?getContact():'';">修改</el-button>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row type="flex">
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.failPartnerRate')" prop="failPartnerRate">
                            <el-input v-model="ruleForm.failPartnerRate" :placeholder="$t('taskCronerAlertConfig.failPartnerRate')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-popover
                            ref="popover2"
                            v-model="popoverFailPartner"
                            placement="bottom"
                            :title="$t('taskCronerAlertConfig.failPartnerRateLink')"
                            trigger="click">
                            <i class="el-icon-close popoverClose" @click="popoverFailPartner = false"></i>
                            <el-transfer
                                filterable
                                v-model="choiceFailPartnerRateLink"
                                :data="failLinkData"
                                :titles="['未选', '已选']"></el-transfer>
                        </el-popover>
                        <el-form-item :label="$t('taskCronerAlertConfig.failPartnerRateLink')">
                            <!--<el-input v-model="ruleForm.failPartnerRateLink" :placeholder="$t('taskCronerAlertConfig.failPartnerRateLink')"></el-input>-->
                            <el-tag v-for="value in choiceFailPartnerRateLink" class="linkTag" type="primary">{{value}}</el-tag>
                            <el-button size="mini" v-popover:popover2 @click="contactList.length === 0?getContact():'';">修改</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.failProgramRate')" prop="failProgramRate">
                            <el-input v-model="ruleForm.failProgramRate" :placeholder="$t('taskCronerAlertConfig.failProgramRate')"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-popover
                            ref="popover3"
                            v-model="popoverFailProgram"
                            placement="bottom"
                            :title="$t('taskCronerAlertConfig.failProgramRateLink')"
                            trigger="click">
                            <i class="el-icon-close popoverClose" @click="popoverFailProgram = false"></i>
                            <el-transfer
                                filterable
                                v-model="choiceFailProgramRateLink"
                                :data="failLinkData"
                                :titles="['未选', '已选']"></el-transfer>
                        </el-popover>
                        <el-form-item :label="$t('taskCronerAlertConfig.failProgramRateLink')">
                            <!--<el-input v-model="ruleForm.failProgramRateLink" :placeholder="$t('taskCronerAlertConfig.failProgramRateLink')"></el-input>-->
                            <el-tag v-for="value in choiceFailProgramRateLink" class="linkTag" type="primary">{{value}}</el-tag>
                            <el-button size="mini" v-popover:popover3 @click="contactList.length === 0?getContact():'';">修改</el-button>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">{{$t('taskCronerAlertConfig.cancel')}}</el-button>
                <el-button type="primary" @click="addData('ruleForm')">{{$t('taskCronerAlertConfig.confirm')}}</el-button>
            </div>
        </el-dialog>
        <el-dialog title="报警联系人" size="tiny" v-model="dialogContact">
            <el-form :model="contactForm" label-width="100px">
                <el-row type="flex">
                    <el-col>
                        <el-form-item label="ID">
                            <el-input v-model="contactForm.id" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.contactName')">
                            <el-input v-model="contactForm.contactName" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.contactType')">
                            <el-input v-model="contactForm.contactType" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.mobile')">
                            <el-input v-model="contactForm.mobile" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.email')">
                            <el-input v-model="contactForm.email" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.weixin')">
                            <el-input v-model="contactForm.weixin" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex">
                    <el-col>
                        <el-form-item :label="$t('taskCronerAlertConfig.qq')">
                            <el-input v-model="contactForm.qq" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col></el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import { mapGetters,mapMutations } from 'vuex';
    import common from '../../assets/script/common';
    export default {
        data() {
            return {
                tableData: [],
                pageName: 'taskAlertConfig',
                pageCount:1,
                sizeAll:0,
                dialogFormVisible: false,
                dialogContact: false,
                contactForm: {},
                searchForm:{
                    id:'',
                    taskClass:''
                },
                ruleForm: {
                    id:'',
                    createDate: '',
                    modifyDate: '',
                    failAllRate: '',
                    failAllRateLink: '',
                    failPartnerRate:'',
                    failPartnerRateLink: '',
                    failProgramRate:'',
                    failProgramRateLink: '',
                    status:'',
                    taskClass: '',
                    timeRun:''
                },
                rules: {
                    failAllRate: [
                        { required: true, message: this.$i18n.t('taskCronerAlertConfig.pleaseInput',{ name: this.$i18n.t('taskCronerAlertConfig.failAllRate') }), trigger: 'blur' }
                    ],
                    failAllRateLink: [
                        { required: true, message: this.$i18n.t('taskCronerAlertConfig.pleaseInput',{ name: this.$i18n.t('taskCronerAlertConfig.failAllRateLink') }), trigger: 'blur' }
                    ],
                    failPartnerRate: [
                        { required: true, message: this.$i18n.t('taskCronerAlertConfig.pleaseInput',{ name: this.$i18n.t('taskCronerAlertConfig.failPartnerRate') }), trigger: 'blur' }
                    ],
                    failPartnerRateLink: [
                        { required: true, message: this.$i18n.t('taskCronerAlertConfig.pleaseInput',{ name: this.$i18n.t('taskCronerAlertConfig.failPartnerRateLink') }), trigger: 'blur' }
                    ],
                    failProgramRate: [
                        { required: true, message: this.$i18n.t('taskCronerAlertConfig.pleaseInput',{ name: this.$i18n.t('taskCronerAlertConfig.failProgramRate') }), trigger: 'blur' }
                    ],
                    failProgramRateLink: [
                        { required: true, message: this.$i18n.t('taskCronerAlertConfig.pleaseInput',{ name: this.$i18n.t('taskCronerAlertConfig.failProgramRateLink') }), trigger: 'blur' }
                    ],
                    taskClass: [
                        { required: true, message: this.$i18n.t('taskCronerAlertConfig.pleaseInput',{ name: this.$i18n.t('taskCronerAlertConfig.taskClass') }), trigger: 'blur' }
                    ],
                    timeRun: [
                        { required: true, message: this.$i18n.t('taskCronerAlertConfig.pleaseInput',{ name: this.$i18n.t('taskCronerAlertConfig.timeRun') }), trigger: 'blur' }
                    ]
                },
                hasTaskClass: true,
                dialogType:'',
                searchId:'',
                searchClass:'',
                contactList:[],
                choiceFailAllRateLink:[],
                choiceFailPartnerRateLink:[],
                choiceFailProgramRateLink:[],
                failLinkData:[],
                tableDataLoading:true,
                popoverFailAll:false,
                popoverFailPartner:false,
                popoverFailProgram:false
            }
        },
        created() {
            if(this.tableData.length === 0){
                console.log(this.tableData);
                this.getData(1,this.$store.state.allTable.pageSize);
            }
        },
        computed:{
            ...mapGetters([
                "pageSizeGetter",
            ]),
        },
        methods:{
            ...mapMutations([
                'pageSizeMutation'
            ]),
            getContact() {
                let self = this;
                let __data = [];
                common.getAjax(self,'/api/taskAlertContacts', 1, {id:''}, (res) => {
                    if(res.data.status === 401){
                        common.refreshToken(self, (token) => {
                            sessionStorage.setItem("token",token);
                            self.getContact();
                        });
                    }else{
                        self.contactList = res.data.results;
                        self.contactList.forEach((value,index) => {
                            __data.push({
                                key: value.contactName,
                                label: value.contactName
                            });
                        });
                        self.failLinkData = __data;
                    }
                });
            },
            showContact(_id) {
                _id = JSON.parse(_id);
                let self = this;
                common.searchTableList(self, 'taskAlertContact', _id, (data) => {
                    if(data.id !== undefined){
                        self.contactForm = data;
                        self.dialogContact = true;
                    }
                });
            },
            contactSure() {
                let self = this;
                let Obj1 = {};
                let Obj2 = {};
                let Obj3 = {};
                let num = 0,len = self.contactList.length;
//                let __ruleForm = self.ruleForm;

                self.contactList.forEach((value,index) => {
                    num++;
                    if(self.choiceFailAllRateLink.indexOf(value.contactName) !== -1) {
                        Obj1[value.id] = value.contactName;
                    }
                    if(self.choiceFailPartnerRateLink.indexOf(value.contactName) !== -1) {
                        Obj2[value.id] = value.contactName;
                    }
                    if(self.choiceFailProgramRateLink.indexOf(value.contactName) !== -1) {
                        Obj3[value.id] = value.contactName;
                    }
                    if(num === len){
                        self.ruleForm.failAllRateLink = JSON.stringify(Obj1);
                        self.ruleForm.failPartnerRateLink = JSON.stringify(Obj2);
                        self.ruleForm.failProgramRateLink = JSON.stringify(Obj3);
                    }
                });
            },
            handleSizeChange(val) {
                let self = this;
                self.pageSizeMutation(val);
                self.getData(1,self.$store.state.allTable.pageSize);
            },
            handleCurrentChange(val) {
                common.changePageGoToTop(this,val);
            },
            getData(_pageSize,_pageNum) {
                let self = this;
                self.tableDataLoading = true;
                common.getTableList(this, 'taskCronerAlertConfig', _pageSize, _pageNum, self.searchForm, (data) => {
                    self.tableData = data.results ? data.results : [];
                    self.pageCount = data.pageCount;
                    self.sizeAll = data.sizeAll;
                    self.tableDataLoading = false;
                });
            },
            addData(formName) {
                let self = this;
                let __ruleForm = this.ruleForm;
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        self.contactSure();
                        if(this.dialogType === 'add'){
                            common.postTableList(self, 'taskCronerAlertConfig', __ruleForm, () => {
                                self.getData(1,self.$store.state.allTable.pageSize);
                                self.dialogFormVisible = false;
                                self.hasTaskClass = true;
                                for(let key in __ruleForm){
                                    __ruleForm[key] = '';
                                }
                                self.ruleForm = __ruleForm;
                            });
                        }else if(this.dialogType === 'edit'){
                            common.putTableList(self, 'taskCronerAlertConfig', __ruleForm, () => {
                                self.getData(1,self.$store.state.allTable.pageSize);
                                this.dialogFormVisible = false;
                                this.hasTaskClass = true;
                                for(let key in __ruleForm){
                                    __ruleForm[key] = '';
                                }
                                this.ruleForm = __ruleForm;
                            });
                        }
                    }
                });
            },
            deleteData(_id) {
                let self = this;
                common.deleteTableList(self, 'taskCronerAlertConfig', _id, () => {
                    self.getData(1,self.$store.state.allTable.pageSize);
                })
            },
            handleEdit(scopes) {
                let self = this;

                let __ruleForm = self.ruleForm;
                this.hasTaskClass = true;
                for(let key in __ruleForm){
                    if(scopes.row[key] !== null){
                        __ruleForm[key] = scopes.row[key].toString();
                    }else {
                        __ruleForm[key] = '';
                    }
                }



                self.choiceFailAllRateLink=Object.values(scopes.row.failAllRateLink);
                self.choiceFailPartnerRateLink=Object.values(scopes.row.failPartnerRateLink);
                self.choiceFailProgramRateLink=Object.values(scopes.row.failProgramRateLink);
                self.ruleForm = __ruleForm;
                self.dialogFormVisible = true;
                self.dialogType = 'edit';
            },
            searchData() {
                let self = this;
                self.getData(1,self.$store.state.allTable.pageSize);
            },
            refreshData() {
                let self = this;
                for(let key in self.searchForm){
                    self.searchForm[key] = '';
                }
                self.getData(1,self.$store.state.allTable.pageSize);
            },
            addButton() {
                let self = this;
                let __ruleForm = self.ruleForm;

                for(let key in __ruleForm){
                    __ruleForm[key] = '';
                }
                self.choiceFailAllRateLink=[];
                self.choiceFailPartnerRateLink=[];
                self.choiceFailProgramRateLink=[];
                self.ruleForm = __ruleForm;
                self.dialogFormVisible = true;
                self.dialogType = 'add';
                self.hasTaskClass = false;
            },
            statusShow(row, column) {
                if(row.status === 1){
                    return '正常';
                }
            }
        }
    }
</script>
